<template>
	<view>
		<view class="channel">
			<view class="channel-name">轻松创业当老板</view>
			<view class="channel-name">占领美业创业先机</view>
			<view class="channel-1">市场合伙人代理商火热招募中，我们期待您的加入</view>
			<view class="change_fn" @click="goAgent()">
				<text>立即申请 ></text>
			</view>
		</view>
		<!-- 入住优势 -->
		<view class="box">
			<view class="title">
				<view>入驻优势</view>
				<view class="border"></view>
			</view>
			<!-- 介绍 -->
			<view class="Advantage">
				<view class="list" v-for="(item,index) in data_design" :key='index'>
					<view class="sric"></view>
					<view class="text">
						<view class="name">{{item.name}}</view>
						<view class="jiesao">{{item.jiesao}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="yingli">
			<view class="titles">
				<view>盈利模式</view>
				<view class="borders"></view>
			</view>
			<view class="cen">
				<view class="cen-1">1 技术服务年费</view>
				<view class="cen-2">商家，独立设计师，技术服务费用</view>
			</view>
		</view>

		<view class="liu_cheng">
			<view class="txts">
				<view>代理条件</view>
				<view class="bor"></view>
			</view>
			<view class="shen">
				<view>点击申请</view>
				
				<view>交流沟通</view>
				
				<view>合同签署</view>
				
				<view>入驻成功</view>
			</view>
		</view>
		<view style="width: 100%;height:63rpx;background-color: #DFDFDF;"></view>
		<view class="btn">
			<view class="jiaru" @click="goAgent()">立即加入</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//设计师入住
				data_design: [{
						name: '零用金模式',
						jiesao: '平台不抽设计师佣金，免佣金入驻模式；'
					},
					{
						name: '回款速度',
						jiesao: '平台不抽设计师佣金，免佣金入驻模式；'
					},
					{
						name: '营销工具',
						jiesao: '平台不抽设计师佣金，免佣金入驻模式；'
					},
					{
						name: '顾客管理',
						jiesao: '一键分析顾客消费行为，让你轻松管理；'
					}
				],
			}
		},
		methods:{
			goAgent(){
				uni.navigateTo({
					url:''
				})
			}
		}
	}
</script>

<style lang="scss">
	.channel {
		padding: 74rpx 0 53rpx 27rpx;
		background-color: #00C6C2;

		.channel-name {
			font-size: 46rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 43rpx;
		}

		.channel-1 {
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
		}

		.change_fn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 86rpx;

			text {
				border-radius: 50rpx;
				display: inline-block;
				padding: 20rpx 40rpx;
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				background-color: #fff;
				color: #00C6C2;

			}
		}
	}

	//设计师入驻的优势

	.box {
		padding: 52rpx 25rpx;

		.title {
			width: 100%;
			height: 32rpx;
			font-size: 34rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #282828;
			text-align: center;

			.border {
				margin: 14rpx auto;
				width: 36rpx;
				height: 5rpx;
				background: #00C6C2;
			}
		}
	}

	//介绍
	.Advantage {
		margin-top: 83rpx;

		.list {
			height: 100rpx;
			width: 100%;
			display: flex;
			margin-bottom: 68rpx;

			.sric {
				width: 100rpx;
				height: 100rpx;
				background: #ECECEC;
				border-radius: 50%;
			}

			.text {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 32rpx;

				.name {
					height: 30rpx;
					font-size: 32rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #282828;
				}

				.jiesao {

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8E8E8E;
				}
			}

		}
	}

	.yingli {
		padding: 0 25rpx 80rpx 25rpx;
		background-color: #DFDFDF;

		.titles {
			text-align: center;
			padding: 55rpx 0;

			.borders {
				margin: 14rpx auto;
				width: 36rpx;
				height: 5rpx;
				background: #00C6C2;
			}
		}

		.cen {
			padding: 36rpx 46rpx;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;

			.cen-1 {
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}

			.cen-2 {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8E8E8E;
				padding-top: 22rpx;
				padding-left: 30rpx;
			}
		}
	}

	.liu_cheng {
		padding: 36rpx 25rpx 43rpx 25rpx;
		background-color: #00c6c2;
		
		.txts{
			text-align: center;			
			font-size: 34rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #FFFFFF;
			
			.bor{
				margin: 14rpx auto;
				width: 36rpx;
				height: 5rpx;
				background: #fff;
			}
		}
		.shen{
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			
			view{
				margin-top: 50rpx;
				text-align: center;
				width: 120rpx;
				height: 120rpx;
				line-height: 120rpx;
				background: #FFFFFF;
				border: 4px solid #FFFFFF;
				border-radius: 50%;			
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}
		}
	}
	.btn{
		padding:48rpx  25rpx 230rpx 25rpx;
		
		.jiaru{
			width: 100%;			
			height: 94rpx;
			text-align: center;
			line-height: 94rpx;
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #FFFFFF;
			background: #00C6C2;
			border-radius: 4rpx;
		}
	}
</style>
